<template>
	<basic-container>
		<avue-crud :option="option" :data="data" v-model="form" :page="page" ref="crud" @search-change="searchChange"
		 @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @row-del="rowDel" :before-open="beforeOpen"
		 @row-update="rowUpdate" @row-save="rowSave" @on-load="onLoad">
			<template slot="menuRight">
				<el-radio-group @change="searchReset" v-model="status" size="small" style="margin-right: 50px;">
					<el-radio-button label="">所有</el-radio-button>
					<el-radio-button :label="item.code" v-for="(item,i) in statusItem" :key="i">{{item.name}}</el-radio-button>
				</el-radio-group>
			</template>
			<template slot-scope="{row}" slot="ordersForm">
				<div>
					<el-tag style="margin-right: 10px;" :key="tag.id" v-for="tag in form.orders" closable :disable-transitions="false"
					 @close="handleClose(tag)">
						{{tag.code}}
					</el-tag>
					<el-button size="small" @click="dialogShow = true;">+</el-button>
				</div>
			</template>
			<template slot-scope="{row}" slot="status">
				<el-tag v-for="(item,i) in statusItem" :key="i" :type="item.type" v-if="item.code == row.status">{{item.name}}</el-tag>
			</template>
		</avue-crud>
		<el-dialog title="选择订单" :visible.sync="dialogShow" v-if='dialogShow' append-to-body :modal-append-to-body='false'>
			<order :carCode="form.code" status="0" :propList="form.orders" @closeMoule="closeMoule">
			</order>
		</el-dialog>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';
	import order from './orderSelect.vue'
	import {
		getCodes
	} from "@/api/system/dict";
	export default {
		components: {
			order
		},
		data() {
			return {
				statusItem: [{
					code: "0",
					type: 'info',
					name: '派单'
				}, {
					code: "1",
					type: '',
					name: '完成'
				}],
				status: "",
				dialogShow: false,
				query: {},
				form: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					refreshBtn: false,
					excelBtn: true,
					menuWidth: '150px',
					column: [{
							label: '相关订单',
							prop: 'orders',
							formslot: true,
							hide: true,
							span: 24
						}, {
							label: "派单编号",
							prop: "code",
							search: true,
							display: false,
							disabled: true,
							width: 150,
							placeholder: "系统自动生成"
						},
						{
							label: "运输公司",
							prop: "carCode",
							search: true,
							filterable: true,
							type: "select",
							dicData: [],
							props: {
								label: "name",
								value: "carrierName"
							},
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "计划日期",
							prop: "schedule",
							type: "date",
							valueFormat: 'yyyy-MM-dd',
							format: "yyyy-MM-dd",
							width: "120px"
						}, {
							label: "状态",
							prop: "status",
							display: false,
							width: "80px",
							slot: true,
							type: "select",
							dicData: [],
							props: {
								label: "name",
								value: "code"
							}
						},
						{
							label: '相关订单',
							prop: 'order',
							display: false
						},
						{
							label: '备注',
							prop: 'remark'
						}
					]
				},
				data: []
			};
		},
		created() {
			this.findObject(this.option.column, 'status').dicData = this.statusItem;
			request({
				url: '/api/BaseCarrier/getpages',
				params: {
					limit: 0
				}
			}).then(res => {
				this.findObject(this.option.column, 'carCode').dicData = res.data.data;
			});
		},
		methods: {
			handleClose(tag) {
				this.form.orders.splice(this.form.orders.indexOf(tag), 1);
			},
			closeMoule(e) {
				this.form.orders = e;
			},
			beforeOpen(done, type) {
				if (["edit"].includes(type)) {
					if (this.form.status != 0) {
						this.$message.warning("该记录无法编辑！");
						return false;
					}
					request({
						url: '2/api/CarPlan/detail',
						method: 'get',
						params: {
							id: this.form.id
						}
					}).then(res => {
						const data = res.data.data;
						this.form = data;
					});
				} else {
					this.form = {
						orders: []
					};
				}
				done();
			},
			rowSave(row, loading, done) {
				delete row.status;
				if (row.orders != undefined && row.orders != "") {
					row.orders.forEach(ele => {
						if (ele.category != undefined && ele.category != "") {
							ele.category = ele.category == '' ? '' : ele.category.join(",")
						}
					});
				}
				request({
					url: '2/api/CarPlan/add',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
					done();
				}, () => {});
			},
			rowUpdate(row, index, loading, done) {
				if (row.orders != undefined && row.orders != "") {
					row.orders.forEach(ele => {
						if (ele.category != undefined && ele.category != "") {
							ele.category = ele.category == '' ? '' : ele.category.join(",")
						}
					});
				}
				return request({
					url: '2/api/CarPlan/edit',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
					done();
				}, () => {});
			},
			rowDel(row) {
				if (row.status != 0) {
					this.$message.warning("该记录无法删除！");
					return false;
				}
				this.$confirm("确定数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return request({
							url: '2/api/CarPlan/remove',
							method: 'post',
							params: {
								ids: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					}, () => {});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '2/api/CarPlan/getpages',
					method: 'get',
					params: {
						key: this.query.code == undefined ? '' : this.query.code,
						type: this.query.carCode == undefined ? '' : this.query.carCode,
						status: this.status == undefined ? '' : this.status,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
	.el-dialog__body {
		padding: 0px 20px 30px 20px;
	}
</style>
